{% extends "base.html" %}

{% block content %}
<!-- 名言区域 -->
{% if quote %}
<section class="quote-section">
    <div class="container">
        <div class="quote-card">
            <div class="quote-icon">
                <i class="fas fa-quote-left"></i>
            </div>
            <p class="quote-text">{{ quote.content }}</p>
            {% if quote.author %}
            <p class="quote-author">—— {{ quote.author }}</p>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}

<!-- 热门故事 QQ:575732022 -->
{% if hot_couple %}
<section class="featured-section">
    <div class="container">
        <div class="section-header">
            <h2>爱人焦点</h2>
            <div class="section-line"></div>
            <p>这世间的每一份爱情都有自己独特的故事</p>
        </div>
        <div class="featured-couple">
            <div class="couple-photos">
                <div class="photo-card husband">
                    <div class="photo-wrapper">
                        <img src="{{ hot_couple.husband_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                             alt="{{ hot_couple.husband_name }}">
                        <div class="photo-info">
                            <h3>{{ hot_couple.husband_name }}</h3>
                            <p>{{ hot_couple.husband_occupation }}</p>
                        </div>
                    </div>
                </div>
                <div class="marriage-badge">
                    <div class="years">
                        <span>{{ hot_couple.marriage_years }}</span>
                        <small>年</small>
                    </div>
                </div>
                <div class="photo-card wife">
                    <div class="photo-wrapper">
                        <img src="{{ hot_couple.wife_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                             alt="{{ hot_couple.wife_name }}">
                        <div class="photo-info">
                            <h3>{{ hot_couple.wife_name }}</h3>
                            <p>{{ hot_couple.wife_occupation }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="couple-story">
                <div class="story-header">
                    <span class="season">第{{ hot_couple.season }}季</span>
                    <span class="likes"><i class="fas fa-heart"></i> {{ hot_couple.likes_count }}</span>
                </div>
                <p class="story-content">{{ hot_couple.story[:300] }}...</p>
                <a href="{{ url_for('main.couple_detail', id=hot_couple.id) }}" class="btn btn-primary">
                    了解他们的故事
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- 更多故事 -->
<section class="stories-section">
    <div class="container">
        <div class="section-header">
            <h2>更多故事</h2>
            <div class="section-line"></div>
            <p>发现更多真实的婚姻故事</p>
        </div>
        <div class="stories-grid">
            {% for couple in other_couples %}
            <div class="story-card">
                <div class="card-media">
                    <div class="media-overlay"></div>
                    <div class="couple-avatars">
                        <img src="{{ couple.husband_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                             alt="{{ couple.husband_name }}" class="avatar">
                        <img src="{{ couple.wife_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                             alt="{{ couple.wife_name }}" class="avatar">
                    </div>
                    <div class="couple-names">
                        <h3>{{ couple.husband_name }} & {{ couple.wife_name }}</h3>
                        <span class="season-tag">第{{ couple.season }}季</span>
                    </div>
                </div>
                <div class="card-content">
                    <div class="story-info">
                        <span class="marriage-years">
                            <i class="fas fa-ring"></i>
                            结婚{{ couple.marriage_years }}年
                        </span>
                        <span class="likes">
                            <i class="fas fa-heart"></i>
                            {{ couple.likes_count }}
                        </span>
                    </div>
                    <p class="story-preview">{{ couple.story[:100] }}...</p>
                    <a href="{{ url_for('main.couple_detail', id=couple.id) }}" class="read-more">
                        了解更多
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="view-all">
            <a href="{{ url_for('main.couples_list') }}" class="btn btn-outline">
                查看全部故事
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- 加入社区 -->
{% if not current_user.is_authenticated %}
<section class="join-section">
    <div class="container">
        <div class="join-content">
            <h2>加入我们的社区</h2>
            <div class="section-line"></div>
            <p>在这里，每个故事都值得被倾听，每段感情都值得被理解</p>
            <div class="join-buttons">
                <a href="{{ url_for('auth.register') }}" class="btn btn-primary">立即注册</a>
                <a href="{{ url_for('auth.login') }}" class="btn btn-outline">登录</a>
            </div>
        </div>
    </div>
</section>
{% endif %}
{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
{% endblock %} 